<template>
  <div class="certification">
    <headTop :headClass="'white_header'">Real name authentication</headTop>
    <div class="infomation">
      <label class="info">
        <span>Real name</span>
        <input type="text" placeholder="Please input your real name." :disabled="!!trueName" v-model="username">
      </label>
      <label class="info">
        <span>ID number</span>
        <input type="text" placeholder="Please enter your ID card number." v-model="idCard">
      </label>
      <p class="prompt">Real name authentication information needs to be consistent with transaction account information.,And cannot be modified after authentication.</p>
    </div>
    <div class="confirm">
      <span class="public_btn" @click="submit">Sure</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'certification',
  data () {
    return {
      trueName: '',
      idCard: '',
      username: ''
    };
  },
  beforeMount () {
    this.getInfo();
  },
  methods: {
    submit () {
      if (!this.username) {
        this.Toast('Please input your real name.');
      } else if (!/^[\u4e00-\u9fa5]+$/.test(this.username)) {
        this.Toast('Real names cannot be numeral.、Letters and special characters');
      } else if (this.username.length > 8) {
        this.Toast('Real name is too long. Please re input.');
      } else if (!this.idCard) {
        this.Toast('Please enter your ID card number.');
      } else if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.idCard)) {
        this.Toast('ID card number is incorrect.');
      } else {
        this.confirm();
      }
    },
    // get data
    getInfo () {
      this.axios.get('index/rename/rename_s').then(({data}) => {
        if (data.status === 200) {
          this.trueName = data.data.username;
          this.username = data.data.username;
          this.idCard = data.data.id_card;
        } else {
          // this.Toast(data.message);
        }
      });
    },
    // Submission of real name authentication
    confirm () {
      this.axios.post('index/rename/rename_dd', {
        username: this.username,
        id_card: this.idCard
      }).then(({data}) => {
        if (data.status === 200) {
          this.Toast('Certification success');
          this.$router.go(-1);
        } else {
          this.Toast(data.message);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  .certification{
    padding-top: 108px;
    background-color: #fff;
    .white_header{
      white-space: nowrap;
    }
    .infomation{
      width: 100%;
      padding: 0 30px;
      position: relative;
      margin-bottom: 100px;
      .info{
        width: 100%;
        height: 108px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        font-size: 28px;
        color: #282828;
        input{
          flex: 1;
          height: 100%;
          font-size: 26px;
          color: #282828;
          text-align: right;
          &:placeholder{
            font-size: 26px;
            color: #999;
          }
        }
      }
      .prompt{
        width: 100%;
        margin-top: 20px;
        font-size: 24px;
        color: #999;
      }
      &::before{
        display: block;
        content: '';
        width: 100%;
        height: 20px;
        background-color: #f5f5f5;
        position: absolute;
        left: 0;
        top: -20px;
      }
    }
    .confirm{
      width: 100%;
      text-align: center;
    }
  }
</style>
